// [JS-Main] Java Script (Only index.php)

$(document).ready(function() {

    /* Load of setting panel with index
     ---------------------------------------------------------------------- */
    /* Main index panel */
    $.ajax({
        type: 'POST',
        url: '../assets/book/editor/setting_panels/sp_main.php',
        success: function(response, status, request) {
            $('.sp_wrapper_index').append(response);
            $('.sp_wrapper_index').css({'left': '0'});
        },
        //beforeSend: function(){$('.loading_img').fadeIn('fast');},
        //complete: function(){$('.loading_img').fadeOut();}
    });

    /* Background editor panel */
    $.ajax({
        type: 'POST',
        url: '../assets/book/editor/setting_panels/sp_background.php',
        success: function(response, status, request) {
            $('.sp_wrapper_bg').append(response);
        },
        beforeSend: function() {
            $('.loading_img').fadeIn('fast');
        },
        complete: function() {
            $('.loading_img').fadeOut();
        }
    });


    /* Click evnt of main index links
     ★★★ TIP : Index에서 'Background' 메뉴를 클릭했을 때 최초로 실행되는 동작들.
     배경 설정 패널 6층 중에서 2층(Layer 2)을 맨 처음 보여줌.
     Ajax와 같이 비동기로 로드된 페이지에는 일반적인 '.click' 메소드를 쓸 수 없다.
     따라서 아래와 같이 '.on' 메소드를 이용.
     ---------------------------------------------------------------------- */
    $(document).on('click', '#spm_index2', function() { //When the press to 'Background' of index list
        $('.btn_gotoindex, .iw_hide').css({'display': 'block'});
        $('.sp_wrapper_bg').css({'left': '0'});
        $('.sp_wrapper_index').css({'left': '-120%'});
        $('.setting_wrapper').css({'min-width': '320px'});
        $('#bg_texture').addClass('texture_inner');
    });

    $('.btn_gotoindex').click(function() { //Home button
        $('.btn_gotoindex').css({'display': 'none'});
        $('.sp_wrapper_bg').css({'left': '-120%'});
        $('.sp_wrapper_index').css({'left': '0'});
        $('.setting_wrapper').css({'min-width': '280px'});
    });

    /* ======================================================================
     
     ★★★ TIP : 모바일과 데스크탑 구분
     모바일 기기(터치 디바이스)에서는 마우스오버가 불가능하므로 마우스오버를 클릭 동작으로 자동 전환.
     당연히 데스크탑에서는 일반적인 마우스오버가 가능하게 함.
     전역 js 폴더에 있는 'jquery.ui.touch-punch.js'가 'jQuery UI'동작을 터치 전용으로 바꿔주는 역할.
     
     - mousedown : 디스플레이를 손가락으로 누르고 있는 동안(터치).
     - mouseup : 디스플레이에서 손가락을 떼는 순간.
     - mouseover : 터치 디바이스에서는 소용이 없으며 mousedown과 같은 역할.
     - mouseout : 역시 터치 디바이스에서는 소용이 없으며 mouseup과 같은 역할.
     - click : mousedown과 mouseup을 동시에 한 것(눌렀다 떼기)과 같은 역할.
     
     ====================================================================== */

    $(function() {
        if (isMobile()) { //■ For Mobile ■

            //★★★ TIP : 모바일 전용 스크립트를 여기에 작성. 

        } else { //■ For Desktop ■

            /* Basic setting (jQuery UI)
             ---------------------------------------------------------------------- */
            $('.setting_wrapper').draggable({//Setting panel Drag & Snap
                delay: 300,
                snap: '.snap_sp',
                handle: '.setting_wrapper_head'
            });

            $('.bg_gallery_box1, .bg_gallery_box2').draggable({//Popup gallery draggable
                handle: '.galbox_head',
                snap: '.snap_sp, .setting_wrapper, .bg_gallery_box1, .bg_gallery_box2'
            });


            /* Button for Show/Hide (Item wrapper)
             ---------------------------------------------------------------------- */
            $('.iw_hide').click(function() { //Press to item layer close button
                $('.iw_hide, .iw_show').toggle(); //Many toggles
                $('.items_wrapper').toggle(); //Item layer close
            });
            $('.iw_show').click(function() { //Press to item layer open button
                $('.iw_show, .iw_hide').toggle(); //Many toggles
                $('.items_wrapper').toggle(); //Item layer open
            });


        } //End of desktop setting
    });
});

// <!-- //[JS-Main] Java Script (Only index.php) -->